import { CSSProperties, useState } from 'react';
import './index.scss';
const ToolTips = ({
  text,
  style,
  children,
}: {
  text: string;
  style?: CSSProperties;
  children: JSX.Element | string;
}) => {
  const [show, setShow] = useState(false);
  const handleHover = () => {
    setShow(true);
  };
  const handleLeave = () => {
    setShow(false);
  };
  return (
    <div
      className="common-tooltips-container"
      onPointerOver={handleHover}
      onPointerLeave={handleLeave}
    >
      {children}
      {show ? (
        <div className="common-tooltips">
          <div className="common-tooltip-text" style={style}>
            {text}
          </div>
          <div className="common-tooltip-arrow" />
        </div>
      ) : (
        ''
      )}
    </div>
  );
};

export default ToolTips;
